<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();//获取项目名称
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
</head>
<body style="padding: 10px;background: white;min-height: 90%">
<div id="divvuehtml" style="width: 90%;height: 100%;margin: auto;">
    <form class="layui-form" id="add">
        <input type="hidden" name="id" v-model="userItems.id"/>
        <input type="hidden" name="tx" v-model="tx"/>
        <table class="layui-table" lay-size="sm">
            <thead>
            <tr>
                <th colspan="4" style="text-align: center;">修改员工信息</th>
            </tr>
            </thead>
            <tbody style="text-align: center;">
            <tr>
                <td>昵称</td>
                <td colspan="3">
                    <input type="text" lay-verify="required" v-model="userItems.nickname" name="nickname"  placeholder="请输入昵称"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>账号</td>
                <td colspan="3">
                    <input type="text" lay-verify="required" v-model="userItems.account" name="account"  placeholder="请输入账号"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td colspan="3">
                    <input type="text" lay-verify="required" v-model="userItems.pwd" name="pwd"  placeholder="请输入密码"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td colspan="3">
                    <select name="sex" v-model="userItems.sex"  required lay-verify="required" lay-filter="stat">
                        <option value=""></option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td colspan="3">
                    <input type="text" lay-verify="required" name="age" v-model="userItems.age" placeholder="请输入年龄"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>电话</td>
                <td colspan="3">
                    <input type="text" lay-verify="required" name="phone" v-model="userItems.phone" placeholder="请输入电话"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>地址</td>
                <td colspan="3">
                    <input type="text" lay-verify="required" name="address" v-model="userItems.address" placeholder="请输入地址"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>头像上传</td>
                <td style="text-align: left">
                    <div class="layui-upload-drag" id="uploadadvert">
                        <i class="layui-icon layui-icon-upload-drag"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                        </div>
                    </div>
                </td>
            </tr>
            <tr >
                <td colspan="4">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
</body>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script th:inline="none">
    var ve = new Vue({
        el: '#divvuehtml',//绑定vue渲染范围
        data: {
            userItems:{},
            "tx":"",
        },created: function () {//vue在打开html也没初始化创建函数
            this.inin();//初始化数据
        },mounted: function () {//初始化html完成后在进行操作
            setTimeout(function() {
                layui.use(['table','form','layer','upload','laydate'],function() {
                    var form = layui.form;
                    var layer = layui.layer;
                    var upload = layui.upload;
                    //拖拽上传
                    upload.render({
                        elem: '#uploadadvert'
                        ,accept: 'images'
                        ,field:"files"
                        ,url: '/api/upload/uploads.do' //改成您自己的上传接口
                        ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                            layer.load(); //上传loading
                        }
                        ,done: function(res){
                            layer.closeAll('loading'); //关闭loading
                            layer.msg('上传成功');
                            ve.tx=res.data;
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "/api/upload/getImage.do?filePath="+res.data);
                            //console.log(res)
                        },error: function(index, upload){
                            layer.closeAll('loading'); //关闭loading
                        }
                    });
                    //监听提交
                    form.on('submit(formDemo)', function(data){
                        var index;
                        $.ajax({
                            url : "/api/employee/updates.do",
                            type : "POST",
                            data : data.field,
                            dataType : "json",
                            beforeSend : function(XMLHttpRequest) {
                                index = layer.msg('正在提交数据中，请稍候', {
                                    icon : 16,
                                    time : false,
                                    shade : 0.8
                                });
                            },success : function(data) {
                                if(data.success){
                                    // 刷新父页面
                                    layer.alert(data.msg, {
                                        icon : 6
                                    }, function() {
                                        xadmin.close();
                                        // 刷新父页面
                                        parent.location.reload();
                                    });
                                }else{
                                    xadmin.alert(data.msg,2)
                                }
                            },complete : function(XMLHttpRequest, textStatus) {
                                layer.close(index);
                            },error : function(data) {
                                layer.alert('网络异常或者数据错误', {
                                    icon : 2
                                });
                            }
                        });
                        return false;
                    });
                });
            },100)
        },methods: {//调用函数
            inin :function (){
                $.get("/api/employee/getById.do",{"id":getUrlParam("id")},function(data){
                    if(data.success){
                        ve.userItems = data.data;
                        if(data.data.tx!=null){
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "/api/upload/getImage.do?filePath="+data.data.tx);
                        }
                    }else{
                        xadmin.alert(data.msg,{icon:2});
                    }
                },"json")
            }
        },updated: function () {
            layui.use(['form'], function(){
                var form = layui.form;
                form.render();
            })
        }
    })
    /**
     * 取得url参数
     */
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  // 匹配目标参数
        if (r != null) return unescape(r[2]); return null; // 返回参数值
    }
</script>
</html>
